import React, { Component } from 'react'
import TheButton from '@/components/TheButton'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheDialog from '@/components/TheDialog'
import SkuChange from '../List/component/SkuDetailsChange'
import { apiUpdateInventory } from '@/request/commodity'
import { exportSheetTable } from '@/utils/exportTable'

export default class InventoryWarning extends Component {
  state = {
    columns: [
      {
        title: '商品名称',
        dataIndex: 'productName'
      },
      {
        title: '物料ID',
        dataIndex: 'materialId',
        render:(text)=>{
          return text ? text : "/"
        }
      },
      {
        title: 'SKU属性',
        dataIndex: 'productValue'
      },
      {
        title: '剩余库存',
        dataIndex: 'skuStock'
      },
      {
        title: '操作',
        render: (text, record) => {
          // return <TheButton hasPermi={['commodity:inventory:editStock']} onClick={() => this.openSkuDialog(record.productId)}>修改库存</TheButton>
        }
      }
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    loading: true
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    const { pageData } = this.state
    React.$post('/management/productInfo/inventoryWarning/findPage', { ...pageData }).then(res => {
      if (res.code === 0 && res.data) {
        this.setState({
          dataSource: res.data,
          pageData: {
            pageNo: res.pageNo,
            pageSize: res.pageSize
          },
          total: res.totalCount,
          loading:false
        })
      }
    })
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => this.getData())
  }
  /**
 * @desc 获取sku价格返回值
 * */
  getNumResult = (numResult) => {
    this.setState({ numResult });
  };
  getSkuProperty = (skuPropertyArray, skuPropertyTable, skuType) => {
    let arr = [];
    if (skuPropertyTable.length > 0) {
      if (
        Object.prototype.toString.call(skuPropertyTable[0]) ===
        "[object Object]"
      ) {
        skuPropertyTable.forEach((v) => {
          arr.push(v);
        });
        arr = [arr];
      } else {
        arr = skuPropertyTable;
      }
    }
    this.setState({ skuPropertyArray, skuPropertyTable: arr, skuType });
  };
  handleOk = () => {
    const { numResult } = this.state
    let stockArr = numResult.map(v => {
      return {
        productSkuId: v.SKUId,
        skuStock: v.stock
      }
    })
    this.updateStock(stockArr)
  }
  updateStock = async stockArr => {
    let res = await apiUpdateInventory([...stockArr])
    if (res.code === 0) {
      React.$message({
        type: 'info',
        content: '修改成功'
      })
      this.closeSkuDialog()
      this.getData()
    }
  }
  closeSkuDialog = () => {
    this.setState({
      skuVisible: false,
      skuProductId: ''
    })
  }
  openSkuDialog = (skuProductId) => {
    this.setState({
      skuVisible: true,
      skuProductId
    })
  }

  toExportSheetTable = () => {
    const pageData = {
      pageNo:1,
      pageSize:-1
    }
    this.setState({loading:true})
    React.$post('/management/productInfo/inventoryWarning/findPage', { ...pageData }).then(res => {
      if (res.code === 0 && res.data) {
        let th_arr = [
          {
            title: '商品名称',
            prop: 'productName',
          },
          {
            title: '物料ID',
            prop: 'materialId'
          },
          {
            title: 'SKU属性',
            prop: 'productValue'
          },
          {
            title: '剩余库存',
            prop: 'skuStock',valueType:'number'
          },
        ]
        let tb_arr = []
        res.data.forEach(item=>{
          tb_arr.push({
            productName:item.productName,
            materialId:item.materialId?item.materialId:'/',
            productValue:item.productValue,
            skuStock:item.skuStock
          })
        })
        exportSheetTable({ fileName: '库存预警', tH_data: th_arr, tB_data: tb_arr, isSheet: true, merge: false, mergeProp: false })
        this.setState({loading:false})
      }
    })
  }

  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total, loading, skuVisible, skuProductId } = this.state
    return (
      <div className='p-layout-box' loading={loading}>
        <div className='p-layout-title' style={{textAlign:"right"}}>
          <TheButton type="default" size="middle"  hasPermi={['commodity:inventory:exportStock']} onClick={this.toExportSheetTable} >导出</TheButton>
        </div>
        <div className="p-layout-content-pagination">
          <TheTable scroll={{ y: '63vh' }} columns={columns} dataSource={dataSource} loading={loading} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
        <TheDialog
          title={'修改库存'}
          visible={skuVisible}
          handleCancel={this.closeSkuDialog}
          handleOk={this.handleOk}
        >
          <SkuChange id={skuProductId} getNumResult={this.getNumResult} getSkuProperty={this.getSkuProperty} />
        </TheDialog>
      </div>
    )
  }
}
